<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="referrer" content="no-referrer" />
      <title>Document</title>
      <style>
            img{
                  width: 100%;
            }

      </style>
</head>
<body>
      <div id="container"></div>
      <script>
            // var xhr = new XMLHttpRequest();
            // var url = "http://v.juhe.cn/toutiao/index?type=top&key=04dbb4728596499a891709faed440669";
            // xhr.open("GET" , url);
            // xhr.send();
            // xhr.onreadystatechange = function(){
            //       if( xhr.readyState === 4 && /^2[\d]{2}/.test( xhr.status )){      
            //             console.log( xhr.responseText );
            //       }
            // }

            // 跨域 :  最主要的原因就是 浏览器的同源策略 ; 
            // 同源策略主要限制 xhr 对象 : 
            // 请求发起的服务器 : http://localhost:80
            // 目标服务器      :  http://v.juhe.cn:80

            // 同协议，同域名， 同端口; 这三个东西必须完全相同才可以发送xhr请求，并且接收到xhr的响应不被浏览器拦截;

            // 绕过同源策略进行不同源的数据访问，我们称之为跨域;

            // jsonp 跨域 , CORS跨域 , 服务器代理跨域 , 后端代理跨域; 

            // 服务器代理跨域  :  
            // 因为同源策略是浏览器的安全策略 ! ;
            // 服务器不用遵从浏览器的同源策略;

            // 服务器代理是nginx服务器代理 ; 

            // 找到nginx配置文件 : nginx.conf
            // phpstudy_pro\Extensions\nginx.1.15.1\conf\vhost\localhost_端口号.conf
            
            // 如果我想要使用 :
            var xhr = new XMLHttpRequest();
            xhr.open("GET" , "/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=头像&start=24&_=1594366274352")
            xhr.send();
            xhr.onreadystatechange = function(){
                  if( xhr.readyState === 4 && /^2[\d]{2}/.test( xhr.status )){      
                        // console.log( xhr.responseText );
                        var data= JSON.parse(xhr.responseText);
                        // console.log(data);
                        var list = data.data.object_list;
                        var html = "";
                        for(var i = 0 ; i < list.length ; i ++){
                              html += `
                                    <li>
                                          <img src="${list[i].photo.path}">
                                          <h2>${list[i].msg}</h2>
                                    </li>
                              `
                        }

                        document.querySelector("#container").innerHTML = html;
                  }
            }
      </script>
</body>
</html>